<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- <async-comp></async-comp>
        <hr> -->

      <!-- 使用suspense做懒加载 -->
      <suspense>
        <!-- 真实内容插槽 -->
        <template #default>
          <async-comp></async-comp>
        </template>

        <!-- 过渡期间内容插槽 -->
        <template #fallback>
          <h1>Loadding...</h1>
        </template>
      </suspense>
    </div>
    
    <script>
      // 从Vue中引入【按需引入】defineAsyncComponent
      // 当你只需要泰山上的一座凉亭时 没必要把整座泰山搬回家 内存是要钱的
      // 用户的等待加载的耐心是有限的
      const { createApp, defineAsyncComponent } = Vue;

      const app = createApp({});

      /* 定义异步组件 */
      const AsyncComp = defineAsyncComponent(
        /* 当用户访问该组件时 才去回调该函数 得到一个Promise对象 当所有资源都加载完毕时 resolve一个组件对象 */
        () =>
          new Promise((resolve, reject) => {
            //   模拟网络加载资源（html css js 静态图片...）耗时
            setTimeout(() => {
              resolve({
                template: "<div>I am async!</div>",
              });
            }, 3000);
          })
      );

      app.component("async-comp", AsyncComp);

      const vm = app.mount("#app");
    </script>
  </body>
</html>
